<template>
	<view class="">
		<view class="ss-box">
			<view class="club-item">
				<view class="club-top flex-align-center">
					<img class="club-img" :src="data.detail.gameImg" alt="">
					<view class="club-info">
						<text class="title">{{data.detail.name}}</text>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-time.png" class="icon" alt="">
							<text>{{data.detail.gameStartTime}}-{{data.detail.gameEndTime}}</text>
						</view>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-dingwei.png" class="icon" alt="">
							<text>{{data.detail.address}}</text>
						</view>
						<view class="c-info flex-align-center">
							<img src="../../../static/img/img/fx-qiye.png" class="icon" alt="">
							<text>{{data.detail.enterpriseName}}</text>
						</view>
					</view>
				</view>
				<view class="flex-justify-s">
					<text class="liulan">浏览7277次</text>
					<text class="jiage">¥{{data.detail.price}}</text>
				</view>
			</view>

		</view>
		<view class="line"></view>
		<view class="competitor-info">
			<view class="com-b" v-for="(item,index) in data.cszInfo" :key="index">
				<view class="title">参赛者信息</view>
				<view class="text">参赛者姓名：{{item.name}}</view>
				<view class="text">联系电话：{{item.telephone}}</view>
				<view class="text">证件号：{{item.licenseNum}}</view>
				<view class="text">性别：{{item.sex==13?'男':'女'}}</view>
				<view class="text">出生年月：{{item.birthday}}</view>
			</view>
		</view>
		<view class="yhq-box">
			<view class="title">
				<text>优惠</text>
				<text class="no-yhj" v-if="!data.yhq">暂无可用优惠券</text>
			</view>
			<view class="flex-align-center ">
				<text class="yhq-text" @click="open" v-if="data.yhq && !data.currentYhq">优惠券</text>
				<text class="yhq-text" @click="open"
					v-else>{{data.currentYhq.type.code==1?data.currentYhq.name:`满${data.currentYhq.threshold}元可用`}}</text>

				<uv-icon size='14' name="arrow-right"></uv-icon>
			</view>
		</view>
		<Pay :type="1" :num="data.price" text="立即支付" :detail="data.payDetail"></Pay>
		<!-- 优惠券 -->
		<uv-popup ref="popup" round="15">
			<view>
				<view class="yhj-list">
					<view class="goumaiquan">
						<view class="coupon-item" v-for="(item,index) in data.yhq" :key="index">
							<view class="quan flex-align-center">
								<view class="gmj-left">
									<text class="num">{{item.type.code==3?item.discount:item.ticketValue}}<text
											class="fuhao">{{item.type.code==3?'折':'￥'}}</text></text>
									<!-- <text class="jg">{{item.type.code==1?'':'价格：¥'+item.price}}</text> -->
								</view>

								<view class="line"></view>
								<view class="quan-sm">
									<text>{{item.type.value}}</text>
									<text>{{item.type.code==1?item.name:`满${item.threshold}元可用`}}</text>
								</view>
								<view @click="use(item)" class="draw-down">
									点击使用
								</view>
							</view>
						</view>

					</view>

				</view>

				<view class="line"></view>
				<view class="canle" @click="close">取消</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import Pay from "@/compoments/pay/pay.vue";
	import {
		getDetailActivity,
		getMnumByName
	} from '../../../../requestApi/api.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const data = ref({
		id: '', //赛事id
		info: {},
		type: '',
		detail: {},
		cszInfo: [],
		yhq: {},
		currentYhq: null, //当前选择的优惠券
		price: 0, //价格
		payDetail: {}, //支付详情
	})
	const popup = ref(null);
	onLoad((e) => {
		data.value.id = e.id;
		data.value.info = JSON.parse(e.item);
		data.value.type = e.type;
		getDetail();
		// getMnumByName({enumName:'orderTypeEnum'})
	})
	//使用优惠券
	const use = (item) => {
		if (item.id == data.value.payDetail.ticketUserId) {
			close();
			return;
		}
		data.value.currentYhq = item;
		data.value.payDetail.ticketUserId = item.id;
		close();
		if (item.type.code == 1) {
			//门票
			data.value.price -= item.ticketValue;
		} else if (item.type.code == 2) {
			//现金券
			data.value.price -= item.ticketValue;
		} else if (item.type.code == 3) {
			//折扣券
			data.value.price = data.value.price * (item.ticketValue / 100);

		}
		// console.log(data.value.currentYhq)
	};
	//关闭
	const close = () => {
		popup.value.close();
	};
	//获取详情
	const getDetail = () => {
		getDetailActivity({
			gameId: data.value.id,
			groupId: data.value.info.id,
			sourceId: data.value.type == 1 ? data.value.info.entryWXResponse.id : data.value.info
				.teamWXResponse.id,
			type: data.value.type
		}).then(res => {
			data.value.detail = res.data.gameInfoWXResponse;
			data.value.price = data.value.detail.price;
			data.value.cszInfo = res.data.entryWXResponse;
			data.value.yhq = res.data.tticket;
			data.value.payDetail = {
				sourceId: data.value.detail.id,
				entrySourceId: data.value.cszInfo[0].id,
				groupId: data.value.detail.groupId,
				ticketUserId: ""
			}

		})
	};
	const open = () => {
		popup.value.open('bottom');
	};
</script>

<style lang="scss">
	.ss-box {
		// background-color: #fff;
		padding: 22rpx 22rpx 34rpx;

		.club-item {
			height: 270rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 22rpx 0;
			margin-bottom: 22rpx;

			.club-top {
				margin-bottom: 28rpx;
			}

			.club-img {
				width: 220rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.club-info {
				flex: 1;

				.title {
					font-size: 30rpx;
					color: #2C2C2C;
					display: inline-block;
					// margin-bottom: 6rpx;
				}

				.c-info {
					font-size: 20rpx;
					color: #A5A5A5;
					margin-bottom: 6rpx;

					.icon {
						width: 20rpx;
						height: 20rpx;
						margin-right: 8rpx;
					}
				}

			}

			.liulan {
				font-size: 24rpx;
				line-height: 52rpx;
				color: #A5A5A5;
			}

			.jiage {
				font-size: 48rpx;
				line-height: 58rpx;
				color: #F26D61;
			}


		}

	}

	.line {
		width: 100vw;
		height: 20rpx;
		background: #F8F8F8;
	}

	.competitor-info {
		padding: 0 42rpx;
		margin-top: 32rpx;
		margin-bottom: 46rpx;

		.com-b {
			width: 100%;
			height: 326rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			padding: 32rpx 64rpx;

			.title {
				font-size: 30rpx;
				color: #2C2C2C;
				margin-bottom: 20rpx;
			}

			.text {
				font-size: 22rpx;
				line-height: 40rpx;
				color: #2C2C2C;
			}
		}
	}

	.yhq-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 42rpx;

		.title {
			font-size: 30rpx;
			line-height: 52rpx;
			color: #2C2C2C;

			.no-yhj {
				color: #ADADAD;
				margin-left: 34rpx;
			}
		}

		.yhq-text {
			font-size: 30rpx;
			line-height: 52rpx;
			color: #F44545;
			margin-right: 20rpx;
		}
	}

	.yhj-list {
		padding: 52rpx 0 34rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.line {
		height: 20rpx;
		background: rgba(248, 248, 248, 1);
	}

	.canle {
		height: 134rpx;
		text-align: center;
		line-height: 134rpx;
		font-size: 36rpx;
		color: #2C2C2C;
	}

	/* 优惠券 */
	.goumaiquan {


		.coupon-item {
			width: 584rpx;
			height: 210rpx;
			position: relative;
			background: url('../../../../static/img/img/yhq-bg.png') no-repeat;
			background-size: cover;
			margin-bottom: 22rpx;


			.quan {
				height: 100%;
				padding-left: 34rpx;

				.gmj-left {
					display: flex;
					flex-direction: column;
					width: 170rpx;

					.jg {
						font-size: 24rpx;
						color: #F26D61;
						margin-left: 16rpx;
					}
				}

				.num {
					font-size: 96rpx;
					font-weight: bold;
					color: #F26D61;
					letter-spacing: -4rpx;
					font-family: DINCond-Black;
					position: relative;
					line-height: 90rpx;
					width: max-content;
					padding-right: 14rpx;

					.fuhao {
						font-size: 48rpx;
						color: #F26D61;
						position: absolute;
						top: -20rpx;
						right: -30rpx;
					}
				}

				.line {
					height: 96rpx;
					width: 2rpx;
					background-color: rgba(242, 108, 97, .2);
					margin: 0 14rpx 0 40rpx;
				}

				.quan-sm {
					font-size: 24rpx;
					color: #F26D61;
					display: flex;
					flex-direction: column;

					text {
						margin-bottom: 8rpx;
					}
				}
			}

			.draw-down {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 32rpx;
				color: #FFFFFF;
				width: 56rpx;
				line-height: 36rpx;
				height: 210rpx;
				display: flex;
				align-items: center;
			}
		}

	}
</style>